import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


// vue-router的使用步骤：
// 1. 下包：yarn add vue-router@3.6.5 -S
//    查看某个包的版本：yarn/npm info 包名 versions
// 2. 导包
// VueRouter变量是个构造函数
import VueRouter from 'vue-router'
// 3. 注册
// 注册插件，插件是用来增强Vue功能的一个模块包
// 一旦Vue.use()了，内部会干两个事：
// (1) 提供两个全局组件，RouterLink 和 RouterView
// (2) 提供两个全局对象， $route 和 $router
Vue.use(VueRouter)
// 导入相应的页面组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'
// 4. 配置路由规则数组(路由表) - 核心
const routes = [
  {
    path: '/find',
    component: Find
  }, {
    path: '/my',
    component: My
  }, {
    path: '/friend/:id',
    name: 'py',// 命名路由
    component: Friend
  },
]
// 5. 创建路由实例
const router = new VueRouter({
  routes
})
// 7. 给出口 -> App.vue中
// 8. 测试

new Vue({
  // 6. 注入
  router,// 会给 $router 对象赋值
  render: h => h(App),
}).$mount('#app')


// 路由的运作的原理：
// 1. 当浏览器的url改变了，拿到#后面的路径
// 2. 挨个去路由表数组中对比path，如果谁命中了
// 3. 把对应的组件渲染<router-view/>的位置
// 4. 如果没有命中的，则不渲染任何内容(页面为空)